@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    section {
        .find_friend-h {
            width: 100%;
            height: r(104);
            background: #eeeeee;
            border-bottom: r(1) solid #d9d9d9;
            span {
                font-size: r(22);
                line-height: r(104);
                margin-left: r(33);
                color: #4a4a4a;
            }
        }
        .find_friend-1 {
            width: 100%;
            height: r(104);
            border-bottom: r(1) solid #d9d9d9;
            img {
                width: r(21);
                height: r(44);
                margin-left: r(40);
                margin-right: r(96);
                display: inline-block;
                vertical-align: middle;
            }
            a {
                font-size: r(29);
                display: inline-block;
                width: 75%;
                line-height: r(104);
                color: #4a4a4a;
                span {
                    float: right;
                }
            }
        }
        .find_friend-2 {
            img {
                width: r(44);
                height: r(36);
                margin-left: r(33);
                margin-right: r(80);
            }
            a {
                color: #d9d9d9;
            }
        }
        .find_friend-3 {
            img {
                width: r(45);
                height: r(39);
                margin-left: r(33);
                margin-right: r(80);
            }
            a {
                color: #4a4a4a;
            }
        }
        .yq_friend-h {
            background: white;
            span {
                font-size: r(27);
                color: #019ae1;
            }
            .font-29 {
                font-size: r(29);
                color: #414541;
            }
        }
        .m-switch {
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            display: block;
            width: 52px;
            height: 32px;
            right: 0;
            top: r(24);
            border: 1px solid #DFDFDF;
            border-radius: 16px;
            background-color: #DFDFDF;
            z-index: 2;
            float: right;
            margin-right: r(30);
        }
        .m-switch:before,
        .m-switch:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            border-radius: 15px;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
        }
        .m-switch:before {
            width: 50px;
            background-color: #9b9b9b;
        }
        .m-switch:after {
            width: 30px;
            background-color: #FFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .m-switch:checked {
            border-color: #019ce4;
            background-color: #019ce4;
        }
        .m-switch:checked:before {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .m-switch:checked:after {
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        .m-switch-old:checked+.m-switch {
            border-color: #019ce4;
            background-color: #019ce4;
        }
        .m-switch-old:checked+.m-switch:before {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .m-switch-old:checked+.m-switch:after {
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        .cell-right input[type="checkbox"]:not(.m-switch) {
            -webkit-appearance: none;
            -moz-appearance: none;
            position: absolute;
            left: -9999em;
        }
    }
}